<template>
  <div class="main">
    <div class="adOuterWrap">
      <div class="back">
        <headerBack></headerBack>
        <h2>
          选择测试排序结果记录
          <b
            class="newTestTitle"
            v-show="flag==false"
            @click="commonJs.gosto('advantageTest')"
          >新的测试</b>
        </h2>
      </div>
      <div class="adWrap">
        <scroller style="top: 1.6rem;">
          <div>
            <div class="adBoxs">
              <div class="listBox">
                <span v-show="flag" class="txtBox" @click="commonJs.gosto('advantageTest')">
                  <i>您尚未完成优势科目测评</i>
                  <b>点击开始</b>
                </span>
                <div
                  :class="['recordList',tabIndex==index?'ractive':'']"
                  v-for="(item,index) in aros"
                  :key="index"
                  @click="tabs(index,item.ranking)"
                >
                  <div class="record1 flex-h" style="margin-bottom: 0.15rem;">
                    <span class="sp1 flex1">
                      <img
                        style="width: 0.4rem;height: 0.4rem;margin-top: 0.05rem;"
                        class="imgIcon"
                        alt
                        :src="tabIndex==index?img2:img1"
                      />
                    </span>
                    <span class="sp2">第{{lens-index}}次生成</span>
                  </div>
                  <div class="record1 flex-h">
                    <span class="sp1 flex1">综合测试结果</span>
                    <span class="sp3">
                      <img src="~/static/iconsvgs/rightsy.png" alt />
                    </span>
                  </div>
                  <div class="record2 flex-h" @click.stop>
                    <span class="sp1 flex1">生成时间</span>
                    <span class="sp2">{{(new Date(item.createTime)).format('yyyy-MM-dd hh:mm')}}</span>
                  </div>
                  <div>
                    <div class="record3">
                      <span>专业排序结果</span>
                    </div>
                    <div class="record4 flex-h">
                      <span
                        class="sps flex1"
                        v-for="(its,$index) in item.ranking"
                        :key="$index+100"
                      >
                        <b class="b1">NO.{{$index+1}}</b>
                        <b class="b2">{{its}}</b>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="width: 100%;height: 2.8rem;"></div>
          </div>
        </scroller>
      </div>
      <load-circle :showLoading="showLoading"></load-circle>
      <div class="botFixed">
        <span @click="returnScheme">使用此结果排序</span>
      </div>
    </div>
  </div>
</template>
<script>
import ls from "store2";
import { format } from "~/plugins/filter";
import headerBack from "~/components/headerBack";
import {
  getReport,
  returnScheme,
  getSchemeRecordResult
} from "~/api/selectCourse";
import loadCircle from "../evaluation/components/loadCircle";
export default {
  head: {
    title: "选科选课"
  },
  components: {
    headerBack,
    loadCircle
  },
  data() {
    return {
      showLoading: false,
      tabIndex: 0,
      img1: require("~/static/images/search_icon_nor.png"),
      img2: require("~/static/images/search_icon_sure.png"),
      craData: [],
      flag: false,
      types: "",
      aros: [],
      rest: [],
      lens: 1,
      rankString: ""
    };
  },
  created() {},

  mounted: function() {
    this.getReport();
  },

  methods: {
    returnScheme() {
      this.showLoading = true;
      let obj = {
        id: this.result_id,
        province: ls.get("userArea"),
        ranking: this.rankString,
        userType: ls.get("userType")
      };
      returnScheme(obj)
        .then(res => {
          if (res.code === "0") {
            sessionStorage.setItem("electiveData", JSON.stringify(res.data));
            setTimeout(() => {
              this.commonJs.gopush("bestPlan");
            }, 1000);
          }
          this.showLoading = false;
        })
        .catch(res => {
          this.showLoading = false;
          this.$vux.toast.text(res.message);
        });
    },
    tabs(index, items) {
      this.tabIndex = index;
      this.rest = items;
      this.result_id = this.resultData[index].id;
    },
    getReport() {
      getReport(ls.get("userType"))
        .then(res => {
          if (res.code === "0") {
            if (res.data.length === 0) {
              this.flag = true;
            } else {
              let $index = null;
              this.aros = res.data;
              this.resultData = res.data;
              this.result_id = this.resultData[0].id;
              this.aros.forEach((item, index) => {
                if (typeof item.ranking == "string") {
                  try {
                    let obj = JSON.parse(item.ranking);
                    if (typeof obj == "object" && obj) {
                      let sorted_keys_array = Object.keys(obj).sort((a, b) => {
                        return obj[b].num - obj[a].num;
                      });
                      item.ranking = sorted_keys_array;
                      return true;
                    } else {
                      return false;
                    }
                  } catch (e) {
                    // console.log(
                    //   "error第：" +
                    //     index +
                    //     "条有问题" +
                    //     item.ranking +
                    //     "!!!" +
                    //     e
                    // );
                    $index = index;
                    return false; /*  */
                  }
                }
              });
              if ($index > 0 || $index == 0) {
                this.aros.splice($index, 1);
              }
              this.rest = this.aros[0].ranking;
              let ary = this.aros[0].ranking;

              ary.forEach(item => {
                this.rankString += item;
              });
              this.lens = res.data.length;
            }
          }
        })
        .catch(error => {
   
          this.$vux.toast.text(error);
        });
    }

  }
};
</script>

<style scoped lang="less">
.recordList {
  margin-top: 0.3rem;
  width: 100%;
  // height:3.76rem;
  height: auto;
  box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
  border-radius: 0.1rem;
  border: 0.02rem solid rgba(238, 238, 238, 1);
  padding: 0.2rem 0.3rem;
  box-sizing: border-box;

  .record1 {
    height: 0.5rem;
    line-height: 0.5rem;

    .sp1 {
      font-size: 0.3rem;
      font-weight: bold;
      color: rgba(34, 34, 34, 1);
    }

    .sp2 {
      width: 1.9rem;
      height: 0.5rem;
      background: rgba(250, 250, 250, 1);
      border-radius: 0.25rem;
      font-size: 0.24rem;
      font-weight: bold;
      color: rgba(187, 187, 187, 1);
      line-height: 0.5rem;
      text-align: center;
    }

    .sp3 {
      width: 0.3rem;

      img {
        width: 0.2rem;
        height: auto;
      }
    }
  }

  .record2 {
    height: 0.5rem;
    line-height: 0.5rem;
    margin-top: 0.3rem;

    .sp2 {
      flex: 2;
    }

    .sp1,
    .sp2 {
      font-size: 0.26rem;
      // font-family:PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
      // line-height:37px;
    }
  }

  .record3 {
    margin-top: 0.3rem;
    padding: 0.18rem 0;
    height: auto;
    border-top: 0.02rem solid rgba(238, 238, 238, 1);

    span {
      font-size: 0.24rem;
      font-weight: bold;
      color: rgba(187, 187, 187, 1);
    }
  }

  .record4 {
    width: 100%;
    height: auto;

    .sps {
      // width: 1.96rem;
      height: 0.8rem;
      background: rgba(250, 250, 250, 1);
      border-radius: 0.1rem;
      filter: blur(0px);

      font-weight: bold;
      color: rgba(34, 34, 34, 1);
      line-height: 0.8rem;
      margin-right: 0.2rem;
      text-align: center;

      b {
        display: block;
        height: 0.4rem;
        text-align: center;
        line-height: 0.4rem;
        font-size: 0.22rem;
      }

      .b1 {
        color: rgba(187, 187, 187, 1);
      }

      .b2 {
        color: rgba(102, 102, 102, 1);
      }
    }

    .sps:nth-of-type(1),
    .sps:nth-of-type(2),
    .sps:nth-of-type(3) {
      .b1 {
        color: rgba(108, 191, 32, 1);
      }

      .b2 {
        color: rgba(34, 34, 34, 1);
      }
    }

    .sp3 {
      margin-right: 0;
    }
  }
}

.ractive {
  border: 0.02rem solid rgba(108, 191, 32, 1);
  box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.3);
}

.adOuterWrap {
  width: 7.5rem;
  height: 100vh;
  background: #fff;
  flex-direction: column;
  overflow: hidden;

  .adWrap {
    padding: 0 0.3rem;
    width: 7.5rem;
    box-sizing: border-box;

    .adBoxs {
      width: 100%;
      height: auto;

      .listBox {
        height: auto;
        padding: 0.3rem 0.3rem;
        box-sizing: border-box;

        .txtBox {
          display: block;
          width: 100%;
          height: 0.8rem;
          background: rgba(255, 241, 184, 1);
          border-radius: 0.1rem;
          opacity: 0.6;
          text-align: center;
          line-height: 0.8rem;

          i,
          b {
            font-size: 0.22rem;

            font-weight: bold;
            color: rgba(34, 34, 34, 1);
          }

          b {
            margin-left: 0.1rem;
            color: @mainColor;
          }
        }
      }
    }
  }
}

.back {
  width: 100%;
  height: auto;

  h2 {
    padding: 0 0.3rem;
    box-sizing: border-box;
    display: block;
    height: 0.8rem;
    font-size: 0.44rem;

    font-weight: bold;
    color: rgba(34, 34, 34, 1);
    line-height: 0.8rem;

    .newTestTitle {
      float: right;
      font-size: 0.22rem;
      color: @mainColor;
    }
  }
}

.botFixed {
  position: fixed;
  height: 1.2rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px -4px 10px 0px rgba(204, 204, 204, 0.2);
  left: 0;
  bottom: 0;
  width: 7.5rem;
  overflow: hidden;

  span {
    width: 6.2rem;
    height: 0.88rem;
    background: @mainColor;
    border-radius: 0.44rem;

    font-size: 0.3rem;

    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    display: block;
    line-height: 0.88rem;
    margin: 0.25rem auto;
  }
}
</style>
